{% extends "base.html" %}

{% block title %}添加课程 - 校园生活助手{% endblock %}

{% block css %}
<style>
    .form-control:focus {
        box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
        border-color: #86b7fe;
    }
    .form-label {
        font-weight: 500;
        color: #495057;
    }
    .form-section {
        margin-bottom: 1.5rem;
    }
    .tag-input-container {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.5rem;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
        min-height: 44px;
        align-items: center;
    }
    .tag {
        background-color: #e9ecef;
        padding: 0.25rem 0.75rem;
        border-radius: 16px;
        font-size: 0.875rem;
        display: flex;
        align-items: center;
    }
    .tag .remove-tag {
        margin-left: 0.5rem;
        cursor: pointer;
        font-weight: bold;
    }
    .tag-input {
        flex: 1;
        border: none;
        outline: none;
        min-width: 100px;
    }
</style>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-8 offset-lg-2">
        <div class="bg-white rounded-lg shadow-sm p-6">
            <h1 class="text-2xl font-bold text-gray-800 mb-4">
                <i class="fa fa-plus-circle mr-2 text-primary"></i>添加新课程
            </h1>
            
            <!-- 消息提示区域 -->
            {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                    {% for category, message in messages %}
                        <div class="alert alert-{{ category }} fade-in mb-4" role="alert">
                            <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            {{ message }}
                        </div>
                    {% endfor %}
                {% endif %}
            {% endwith %}
            
            <!-- 添加课程表单 -->
            <form method="POST" action="{{ url_for('add_course') }}">
                {{ form.hidden_tag() }}
                
                <!-- 基本信息 -->
                <div class="form-section">
                    <h3 class="text-lg font-semibold text-gray-700 mb-3">基本信息</h3>
                    
                    <!-- 课程名称 -->
                    <div class="mb-4">
                        {{ form.name.label(class="form-label") }}
                        {{ form.name(class="form-control", placeholder="请输入课程名称") }}
                        {% if form.name.errors %}
                            <div class="text-danger mt-1">
                                {% for error in form.name.errors %}
                                    <small>{{ error }}</small>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                    
                    <!-- 学期 -->
                    <div class="mb-4">
                        {{ form.semester.label(class="form-label") }}
                        {{ form.semester(class="form-select") }}
                        {% if form.semester.errors %}
                            <div class="text-danger mt-1">
                                {% for error in form.semester.errors %}
                                    <small>{{ error }}</small>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                    
                    <!-- 课程类型 -->
                    <div class="mb-4">
                        {{ form.type.label(class="form-label") }}
                        {{ form.type(class="form-select") }}
                        {% if form.type.errors %}
                            <div class="text-danger mt-1">
                                {% for error in form.type.errors %}
                                    <small>{{ error }}</small>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                    
                    <!-- 学分 -->
                    <div class="mb-4">
                        {{ form.credits.label(class="form-label") }}
                        {{ form.credits(class="form-control", type="number", min="0", step="0.5", placeholder="请输入学分") }}
                        {% if form.credits.errors %}
                            <div class="text-danger mt-1">
                                {% for error in form.credits.errors %}
                                    <small>{{ error }}</small>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                </div>
                
                <!-- 教师信息 -->
                <div class="form-section">
                    <h3 class="text-lg font-semibold text-gray-700 mb-3">教师信息</h3>
                    
                    <!-- 授课教师 -->
                    <div class="mb-4">
                        {{ form.teacher.label(class="form-label") }}
                        {{ form.teacher(class="form-control", placeholder="请输入教师姓名") }}
                        {% if form.teacher.errors %}
                            <div class="text-danger mt-1">
                                {% for error in form.teacher.errors %}
                                    <small>{{ error }}</small>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                    
                    <!-- 联系邮箱 -->
                    <div class="mb-4">
                        {{ form.teacher_email.label(class="form-label") }}
                        {{ form.teacher_email(class="form-control", placeholder="请输入教师邮箱") }}
                        {% if form.teacher_email.errors %}
                            <div class="text-danger mt-1">
                                {% for error in form.teacher_email.errors %}
                                    <small>{{ error }}</small>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                </div>
                
                <!-- 时间地点 -->
                <div class="form-section">
                    <h3 class="text-lg font-semibold text-gray-700 mb-3">时间地点</h3>
                    
                    <!-- 上课时间 -->
                    <div class="mb-4">
                        {{ form.schedule.label(class="form-label") }}
                        <div class="row">
                            <div class="col-md-6">
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fa fa-calendar"></i></span>
                                    {{ form.schedule(class="form-control", placeholder="如：周一、周三 14:00-16:00") }}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <button type="button" class="btn btn-outline-secondary w-100" data-bs-toggle="modal" data-bs-target="#scheduleHelpModal">
                                    <i class="fa fa-question-circle mr-2"></i>格式帮助
                                </button>
                            </div>
                        </div>
                        {% if form.schedule.errors %}
                            <div class="text-danger mt-1">
                                {% for error in form.schedule.errors %}
                                    <small>{{ error }}</small>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                    
                    <!-- 上课地点 -->
                    <div class="mb-4">
                        {{ form.location.label(class="form-label") }}
                        {{ form.location(class="form-control", placeholder="请输入上课地点") }}
                        {% if form.location.errors %}
                            <div class="text-danger mt-1">
                                {% for error in form.location.errors %}
                                    <small>{{ error }}</small>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                </div>
                
                <!-- 其他信息 -->
                <div class="form-section">
                    <h3 class="text-lg font-semibold text-gray-700 mb-3">其他信息</h3>
                    
                    <!-- 课程描述 -->
                    <div class="mb-4">
                        {{ form.description.label(class="form-label") }}
                        {{ form.description(class="form-control", rows="4", placeholder="请输入课程描述") }}
                        {% if form.description.errors %}
                            <div class="text-danger mt-1">
                                {% for error in form.description.errors %}
                                    <small>{{ error }}</small>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                    
                    <!-- 课程标签 -->
                    <div class="mb-4">
                        <label class="form-label">课程标签</label>
                        <div class="tag-input-container" id="tag-input-container">
                            <input type="text" class="tag-input" placeholder="输入标签后按回车">
                        </div>
                        <input type="hidden" id="tags-input" name="tags" value="">
                        <small class="text-gray-500">添加标签以方便分类和搜索课程</small>
                    </div>
                    
                    <!-- 颜色标识 -->
                    <div class="mb-4">
                        <label class="form-label">课程颜色标识</label>
                        <div class="d-flex flex-wrap gap-2">
                            {% for color in course_colors %}
                            <div class="color-option" style="background-color: {{ color }}; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; border: 2px solid transparent;" data-color="{{ color }}"></div>
                            {% endfor %}
                        </div>
                        <input type="hidden" id="color-input" name="color" value="{{ course_colors[0] }}">
                        <small class="text-gray-500">选择课程在课程表中显示的颜色</small>
                    </div>
                </div>
                
                <!-- 提交按钮 -->
                <div class="mt-6">
                    <button type="submit" class="btn btn-primary mr-2">
                        <i class="fa fa-save mr-2"></i>保存课程
                    </button>
                    <a href="{{ url_for('courses') }}" class="btn btn-secondary">
                        <i class="fa fa-arrow-left mr-2"></i>返回列表
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 课程表格式帮助模态框 -->
<div class="modal fade" id="scheduleHelpModal" tabindex="-1" aria-labelledby="scheduleHelpModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="scheduleHelpModalLabel">课程时间格式帮助</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p class="mb-3">请按照以下格式输入课程时间：</p>
                <ul class="list-disc pl-5 mb-3">
                    <li>单天课程：周一 09:00-11:00</li>
                    <li>多天课程：周一、周三 14:00-16:00</li>
                    <li>间隔时间：周二 10:30-12:00, 14:30-16:00</li>
                </ul>
                <p class="text-gray-600">
                    <i class="fa fa-info-circle mr-1"></i>
                    系统会自动解析您输入的时间格式，用于生成课程表。
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">我知道了</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
    // 标签输入功能
    const tagInputContainer = document.getElementById('tag-input-container');
    const tagInput = tagInputContainer.querySelector('.tag-input');
    const tagsHiddenInput = document.getElementById('tags-input');
    
    // 当前标签列表
    let tags = [];
    
    // 添加标签
    function addTag(tagText) {
        // 移除前后空格
        tagText = tagText.trim();
        
        // 检查标签是否为空或已存在
        if (!tagText || tags.includes(tagText) || tags.length >= 5) return;
        
        // 添加到标签列表
        tags.push(tagText);
        
        // 创建标签元素
        const tagElement = document.createElement('div');
        tagElement.className = 'tag';
        tagElement.innerHTML = `${tagText} <span class="remove-tag" data-tag="${tagText}">&times;</span>`;
        
        // 插入到输入框之前
        tagInputContainer.insertBefore(tagElement, tagInput);
        
        // 更新隐藏输入框
        updateTagsInput();
        
        // 清空输入框
        tagInput.value = '';
        
        // 添加删除标签事件
        tagElement.querySelector('.remove-tag').addEventListener('click', function() {
            removeTag(this.getAttribute('data-tag'));
        });
    }
    
    // 移除标签
    function removeTag(tagText) {
        const index = tags.indexOf(tagText);
        if (index > -1) {
            tags.splice(index, 1);
            
            // 移除对应的标签元素
            const tagElements = tagInputContainer.querySelectorAll('.tag');
            tagElements.forEach(element => {
                if (element.textContent.trim().startsWith(tagText)) {
                    tagInputContainer.removeChild(element);
                }
            });
            
            // 更新隐藏输入框
            updateTagsInput();
        }
    }
    
    // 更新隐藏输入框
    function updateTagsInput() {
        tagsHiddenInput.value = tags.join(',');
    }
    
    // 监听输入框回车事件
    tagInput.addEventListener('keydown', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            addTag(this.value);
        }
    });
    
    // 颜色选择功能
    const colorOptions = document.querySelectorAll('.color-option');
    const colorInput = document.getElementById('color-input');
    
    // 设置初始选中颜色
    colorOptions[0].style.borderColor = '#007bff';
    
    // 颜色选择事件
    colorOptions.forEach(option => {
        option.addEventListener('click', function() {
            // 重置所有选项的边框
            colorOptions.forEach(opt => {
                opt.style.borderColor = 'transparent';
            });
            
            // 设置当前选中选项的边框
            this.style.borderColor = '#007bff';
            
            // 更新隐藏输入框
            colorInput.value = this.getAttribute('data-color');
        });
    });
    
    // 表单提交时的处理
    document.querySelector('form').addEventListener('submit', function() {
        // 如果输入框中有内容，添加为标签
        if (tagInput.value.trim()) {
            addTag(tagInput.value.trim());
        }
    });
</script>
{% endblock %}